<template>
  <div class="page-container {{ pageName }}">
    <div class="g-table-filter">
      <span>{{ pathName }}</span>
    </div>
    <div class="g-table-list table-container">
      <watt-data-grid :data="accessData" :spinning="spinning" @change="toSearch">
        <template #tableToolbar>
          <div class="table-toolbar">
            <a-button type="primary" @click="userAdd">新增权限</a-button>
          </div>
        </template>
        <template #table:control="{ row }">
          <div class="g-column-control">
            <a-button type="default" size="small" @click="userEdit(row)">编辑</a-button>
            <a-popconfirm title="确认删除该数据吗？" @confirm="userdel(row)">
            <a-button type="primary" size="small" danger>删除</a-button>
            </a-popconfirm>
          </div>
        </template>
      </watt-data-grid>
    </div>

    <watt-form v-model:visible="editStat" title="权限" :form-items="formItems" :editor="editor" @submit="handleSubmit" />
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'

const accessColumns = [
  {
    title: '权限名称',
    key: 'name',
    width: 200,
    align: 'center'
  },
  {
    title: '权限标识',
    key: 'code',
    width: 200,
    align: 'center'
  },
  {
    title: '备注',
    key: 'description',
    width: 200,
    align: 'center'
  }
]

const spinning = ref(false)
const editStat = ref(false) // 弹窗状态
const pageIndex = ref(1)
const pageSize = ref(20)
const search = reactive({})
const accessData = reactive({
  columns: accessColumns
})
const editor = reactive({}) // 编辑数据
const formItems = ref([])


const toSearch = (params) => {
  console.log(params)
}

const userdel = (row) => {
  console.log(row)
}

const userEdit = (row) => {
  console.log(row)
}

const userAdd = () => {
  console.log('新增权限')
}

const handleSubmit = (values) => {
  console.log(values)
}

const getData = () => {
  spinning.value = true
  setTimeout(() => {
    spinning.value = false
  }, 1000)
}
getData()
</script>
<style lang="less" scoped>
@import '~@/styles/mixin.less';
.{{ pageName }} {
  display: flex;
  > div {
    flex: 1;
  }
  .table-container {
    flex: 1;
    .table-toolbar {
      margin-bottom: 10px;
    }
  }
}
</style>
